<template>
	<view id="pop">
		<view class="" @click="changeShow(true)">
			<slot name="main"></slot>
		</view>
		<view class="box" :style="positionStyles()"
		v-if="show"
		:class="{'closean':anshow}"
		>
			<slot name="content"></slot>
		</view>
	</view>
	<view class="mask" v-if="show" @click="changeShow(false)"></view>
</template>

<script setup lang="ts">
	import { onMounted, ref, getCurrentInstance,reactive } from "vue"
	
	
	let anshow = ref(false)
	let show = ref(false)
	let props = defineProps({
		position:{
			type:String,
			default:'bottom'
		}
	})
	
	
	const changeShow = (flag:boolean)=>{
		if(flag){
			show.value = true
			anshow.value = false
		}else{
			anshow.value = true
			setTimeout(()=>{
				show.value = false
			},200)
		}
	}
	
	
	
	const instance = getCurrentInstance()
	onMounted(()=>{
		uni.createSelectorQuery().in(instance).select('#pop').boundingClientRect(e=>{
			area.top = e.top
			area.bottom = e.bottom
			area.left = e.left
			area.right = e.right
			
			console.log(area,'a')
			
		}).exec()
	})
	
	let area = reactive({
		top:0,
		bottom:0,
		left:0,
		right:0
	})
	
	
	const positionStyles = ()=>{
		switch(props.position){
			case 'bottom':
				return `top:${area.bottom}px;left:0;right:0;margin:auto`
			case 'left':
				return `left:${area.left}px;top:0;bottom:0;margin:auto;`
			case 'right':
				return `right:${area.right}px;top:0;bottom:0;margin:auto;`
			case 'br':
				return `top:${area.bottom}px;right:calc(100vw - ${area.right}px);`
			case 'bl':
				return `top:${area.bottom}px;left:${area.left}px;`
		}
	}
	
	defineExpose({
		show
	})
	
	
</script>

<style scoped lang="scss">
	@keyframes open {
		from{
			transform: scale(.3);
			opacity: .3;
		}
	}
	@keyframes close {
		to{
			transform: scale(.3);
			opacity: .3;
		}
	}
	.box{
		position: fixed;
		animation: open 300ms;
		z-index: 101;
	}
	.closean{
		animation: close 300ms;
	}
	
	.mask{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}

</style>